<template>
	<view>
		<!-- <view class="top">
			<view class="content">
				<view class="left">
					<view class="numeral">{{z}}</view>
					<view class="text">直推团队(人)</view>
				</view>
				
				<view class="left">
					<view class="numeral">{{q}}</view>
					<view class="text">全部团队(人)</view>
				</view>
				<view class="left">
					<view class="numeral">{{y}}</view>
					<view class="text">有效人数</view>
				</view>
			</view>
		</view> -->

		<view class="menu_box">
			<view class="menu">
				<!-- <view class="bg"><image src="../../static/bg03.png" mode="widthFix"></image></view> -->
				<view class="con">
					<view class="num">{{z}}</view>
					<view class="text">团队总人数</view>
				</view>
			</view>
			<view class="menu">
				<!-- <view class="bg"></view> -->
				<view class="con">
					<view class="num">{{q}}</view>
					<view class="text">直推人数</view>
				</view>
			</view>
			<view class="menu">
				<view class="bg"></view>
				<view class="con">
					<view class="num">{{y}}</view>
					<view class="text">间推人数</view>
				</view>
			</view>
		
		</view>

		<view class="team_box teamStyle01" :class="1 == true ? 'scrrolHeader' : ''">
		
			<view class="team">会员账号</view>
			<view class="team has_line">会员等级</view>
		<!-- 	<view class="team has_line">销售等级</view> -->
			<view class="team has_line">团队人数</view>
		<!-- 	<view class="team">加入时间</view> -->
		</view>

		<view class="auto_team">
			<block v-for="(item, index) in list" :key="'list' + index">
				<view class="team_box teamStyle02" style="width: 100%;">
				
					
						<!-- <view class="portrait">
							<image :src="item.img" mode="scaleToFill"></image>
						</view> -->
						
					<view class="team">{{ item.name }}</view>
				
					<view class="team" >{{item.lv_id}}</view>
					
					
					<!-- <view class="team" >{{item.yw_id}}</view> -->

					
					<view class="team">{{ item.td }}</view>
					
					<!-- <view class="team">2021-3-30</view> -->
				</view>
			</block>
		</view>
		
		<view class="confirm02" data-url='/pages/share/share' @click="gotopage">继续邀请</view>

		<!-- <view class="inxun">
			<view class="kamt" v-for="(c,i) in list">
				<view class="mb01">
					<view>
						<text class="tit01">会员昵称：</text>
						<text class="tit02">{{c.username}}</text>
					</view>
				</view>
				<view class="mb02">
					<text class="tit01">会员等级：</text>
					<text class="tit02">{{c.nn}}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			z: 0,
			d: 0,
            x: 0,
			fg: 0,
			q: 0,
			y: 0,
			sj: '',
		    fg_yj: '',
			teamData: [
			
			]
		};
	},
	onShow() {
		let me = this;

		me.Net._get('td', {}, res => {
			if (res.code == 1) {
				me.list = res.data.list;
				me.z = res.data.z;
				me.d = res.data.d;
				me.x = res.data.x;
					me.fg = res.data.fg;
				me.y = res.data.y;
				me.q = res.data.q;
				me.sj = res.data.sj;
				me.fg_yj = res.data.fg_yj;
				console.log(res.data);
			}
		});
	},
	methods: {
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		up_tip(){
			let me = this;
			uni.showModal({
				title: '升级进度',
				content: me.sj,
				showCancel:false,
				confirmText	:'知道了',
				success: function (res) {
					if (res.confirm) {
						return
					}
				}
			});
		},
		up_tip1(){
			let me = this;
			uni.showModal({
				title: '复购业绩进度',
				content: me.fg_yj,
				showCancel:false,
				confirmText	:'知道了',
				success: function (res) {
					if (res.confirm) {
						return
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
.inxun {
	width: 100%;
	margin: auto;
}
.inxun .kamt {
	width: 92%;
	margin: 0vw auto 3vw;
	padding: 2vw 3vw;
	background-color: #fff;
	border-radius: 2vw;
}
.inxun .kamt .mb01 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 3.5vw;
	height: 6vw;
	line-height: 6vw;
}
.inxun .kamt .mb02 {
	width: 100%;
	font-size: 3.5vw;
	height: 6vw;
	line-height: 6vw;
}
.inxun .tit01 {
	color: #666;
}
.inxun .tit02 {
	color: #333;
}
.inxun .tit03 {
	color: #fe5b32;
}

.top {
	width: 100%;
	position: relative;
	margin-bottom: 10px;
	background-image: linear-gradient(#4d726f, #b4eef7);
	height: 35vw;
	height: 20vw;
}
.picture {
	width: 100%;
	margin-left: 10px;
}
.picture image {
	width: 94%;
	margin: auto;
}
.top .content {
	display: flex;
	justify-content: space-between;
	width: 88%;
	margin: auto;
	color: #fff;
	padding-top: 2vw;
}
.top .content .left {
	width: 30%;
	text-align: center;
}
.top .content .numeral {
	font-size: 18px;
	margin-top: 6px;
}
.top .content .text {
	font-size: 3.5vw;
}
.botton {
	border-radius: 30px;
	background-color: #fffacf;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 3.5vw;
	margin-top: 25px;
}
.list_box {
	width: 94%;
	margin: 0vw auto 3vw;
	background-color: #fff;
	border-radius: 2vw;
	padding: 2vw 4vw;
}
.but_list {
	display: flex;
	justify-content: space-between;
	height: 45px;
	line-height: 45px;
	font-size: 3.5vw;
	border-bottom: 1px solid #e3e3e3;
}
.but_list .text {
	color: #61697c;
}
.but_list .jin_er {
	color: #ff5c33;
	font-size: 14px;
}
.but_list .shu_er {
	color: #989898;
	font-size: 14px;
}
.bg_bj {
	width: 100%;
	height: 15px;
	background-color: #f8f8f8;
}
.zhu {
	width: 85%;
	margin: 10px auto;
	border: 1px solid #e7e7e7;
	padding: 10px;
}
.zhu .text_01 {
	color: #fd5943;
	font-size: 20px;
	font-weight: bold;
}
.zhu .text_02 {
	color: #61697c;
	font-size: 16px;
	margin: 5px 0px;
}
.zhu .text_03 {
	color: #fd5943;
	font-size: 16px;
}
.foot {
	background: linear-gradient(to right, #ff5f30, #fa3443);
	text-align: center;
	width: 90%;
	border-radius: 20px;
	margin: auto;
	height: 40px;
	line-height: 40px;
	color: #fff;
}
.foot_box {
	position: fixed;
	bottom: 0px;
	display: flex;
	justify-content: flex-start;
	background-color: #fff;
	height: 60px;
	width: 100%;
	padding: 5px 10px 0px;
	border-top: 1px solid #ebecf7;
}
.foot_box .menu {
	width: 25%;
}
.foot_box .menu .tupian {
	width: 25%;
}
.foot_box .menu .tupian image {
	width: 30px;
	height: 30px;
	padding-left: 25px;
}
.foot_box .text01 {
	font-size: 14px;
	color: #848b96;
	text-align: center;
}
.foot_box .text02 {
	font-size: 14px;
	color: #ffd014;
	text-align: center;
}
.bg05 {
	height: 70px;
	width: 100%;
}

.menu_box {
	width: 100%;
	padding: 5vw 4%;
	background-color: #4d726f;
	display: flex;
	align-items: auto;
	flex-wrap: wrap;
}

.menu_box .menu {
	width: 33%;
	position: relative;
}

.menu_box .menu:last-child {
	margin-right: 0;
}

.menu_box .menu .bg {
	width: 100%;
	height: 120rpx;
}

.menu_box .menu .bg image {
	width: 100%;
}

.menu_box .menu .con {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.menu_box .menu .con .num {
	font-size: 5vw;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.menu_box .menu .con .text {
	font-size: 3.5vw;
	color: #fff;
	margin-top: 1.5vw;
	text-align: center;
}
.menu_box .menu_tip{
	width: 100%;
	padding-top: 20rpx;
	color: #ffffff;
	font-size: 28rpx;
	text-align: center;
}
.menu_box .menu_tip .m_tip{
	position: relative;
}
.menu_box .menu_tip .m_tip::after{
	content: '';
	position: absolute;
	bottom: -6rpx;
	left: 7%;
	width: 86%;
	height: 1rpx;
	background: #FFFFFF;
}
.menu_box .menu_tip .m_tip .mt_icon{
	font-size: 35rpx;
	margin-right: 15rpx;
}

.team_box {
	width: 92%;
	margin: 0 auto;
	background-color: #fff;
	padding: 0 4%;
	display: flex;
}

.teamFlexd {
	position: fixed;
	left: 0;
	top: calc(27.5vw + var(--status-bar-height));
	z-index: 999;
}

.teamStyle01 {
	border-bottom: none;
	border-radius: 3vw 3vw 0 0;
	margin-top: 4vw;
}

.teamStyle02 {
	border-top: none;
	border-bottom: none;
}

.auto_team{
	width: 92%;
	margin-left: 4%;
	min-height: 10vh;
	background: #FFFFFF;
	border-radius: 0 0 3vw 3vw;
	border-top: 1rpx solid #f9f9f9;
}

.auto_team .team_box:last-child{
	border-radius: 0 0 3vw 3vw;
	margin-bottom: 3vw;
}

.team_box .team {
	width: 33.3%;
	font-size: 3.5vw;
	height: 10.5vw;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
}

.team_box .team:nth-child(1) {
	justify-content: flex-start;
}

.team_box .team:last-child {
	justify-content: flex-end;
}

.team_box .team .portrait {
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
}

.team_box .team .portrait image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.team_box .team .name {
	flex: 1;
	font-size: 3vw;
	color: #333;
	margin-left: 1vw;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.team_box .has_line{
	position: relative;
}
.team_box .has_line::before{
	content: '';
	position: absolute;
	width: 2rpx;
	height: 50%;
	background: #d6d6d6;
	left: 0;
	top: 25%;
}

.menu_tip_box{
	width: 100%;
	display: flex;
}
</style>
